<template>
  <div class="register">
    <v-container class="my-16">


      <v-form
          ref="form"
          v-model="valid"
          lazy-validation
      >

        <v-row align="center" justify="center">

          <v-col
              cols="12" md="6" sm="6" offset-sm="n2" offset-md="n2">
            <v-card>
              <v-btn text to="/" class="ma-1">
                <v-icon>mdi-arrow-left</v-icon>返回
              </v-btn>
              <v-card-title class="justify-center">登录页面</v-card-title>
              <v-text-field
                  v-model="name"
                  :counter="6"
                  :rules="nameRules"
                  label="用户名/邮箱/电话"
                  required
                  class="px-12"
                  prepend-icon="mdi-account"
                  outlined
              ></v-text-field>
              <v-text-field
                  v-model="password"
                  :rules="passwordRules"
                  label="密码"
                  required
                  class="px-12"
                  prepend-icon="mdi-lock"
                  outlined
              ></v-text-field>

              <div class="py-5 px-14">
                <v-btn
                    :disabled="!valid"
                    color="success"
                    @click="validate"
                    block
                    elevation="10"
                >
                  登录
                </v-btn>

              </div>
              <div>
              <v-btn text class="ma-1" to="">忘记密码？</v-btn>
              <v-btn text class="ma-1" to="/register">没有账号？注册</v-btn>
              </div>
            </v-card>
          </v-col>

        </v-row>

      </v-form>
    </v-container>
  </div>
</template>

<script>
import Header from "@/components/Header";

export default {
  name:"Register",
  data: () => ({
    valid: true,
    name: '',
    nameRules: [
      v => !!v || '账号不能为空',
      v => (v && v.length >= 6) || '账号必须大于6个字符',
    ],
    password:'',
    passwordRules:[
      v => !!v || '密码不能为空',
      v => (v && v.length >= 6) || '含字母数字不小于6位',
    ],

  }),

  methods: {
    validate () {
      this.$refs.form.validate()
    },
    reset () {
      this.$refs.form.reset()
    },
  },
}
</script>

<style scoped>

</style>
